<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-02 17:59:39
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-08-14 11:31:57
 * @FilePath: \orderApp\packageOne\pages\foodReview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '伙食问卷',
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="伙食问卷"></cu-navbar>
    <view class="box-border">
      <cu-card margin="24rpx" padding="10" v-for="(item, index) in questionList" :key="index">
        <uv-collapse :border="true" :value="[1]">
          <uv-collapse-item :title="`${index + 1}.${item.topicContent}`" name="1" :border="true">
            <uv-checkbox-group v-model="item.checkVal" v-if="item.radio != 1" placement="column">
              <uv-checkbox
                :customStyle="{ marginBottom: '8px' }"
                v-for="(it, idx) in item.optionBoxs"
                :key="idx"
                activeColor="#00754A"
                :label="it.optionContent"
                :name="it.optionId"
              ></uv-checkbox>
            </uv-checkbox-group>

            <uv-radio-group v-model="item.checkVal" v-if="item.radio == 1" placement="column">
              <uv-radio
                :customStyle="{ margin: '8px' }"
                v-for="(it, idx) in item.optionBoxs"
                :key="idx"
                :label="it.optionContent"
                :name="it.optionId"
                activeColor="#00754A"
              ></uv-radio>
            </uv-radio-group>
          </uv-collapse-item>
        </uv-collapse>
      </cu-card>

      <cu-card margin="24rpx">
        <p class="advice">其他意见建议</p>
        <uv-textarea v-model="advice" count placeholder="请输入内容" height="100"></uv-textarea>
      </cu-card>
      <view class="bottom" :style="{ '--bot': bottom + 8 + 'px' }">
        <view class="btnBox">
          <uv-button shape="circle" color="#00754A" @click="submit" :disabled="!disabled">
            <span style="font-size: 31rpx">提交</span>
          </uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reqQuestionnaire, saveQuestionnaire } from '@/service/business/goods/index'
import { useUserStore } from '@/store'
const userStore = useUserStore()

const bottom = ref(userStore.pinia_SafeVal.bottom)
// 建议
const advice = ref('')

const disabled = computed(() => {
  return questionList.value.some((el) => el.checkVal != false) || advice.value != ''
})

// 提交评价
const submit = () => {
  let params = []
  const userId = userStore.userInfo.user.userId
  advice.value &&
    params.push({
      userId,
      advice: advice.value,
    })
  questionList.value?.forEach((el) => {
    if (!el.radio && el.checkVal.length) {
      el.checkVal?.forEach((it) => {
        params.push({
          surveyId: el.surveyId,
          optionId: it,
          userId,
        })
      })
    } else if (el.radio && el.checkVal) {
      params.push({
        surveyId: el.surveyId,
        optionId: el.checkVal,
        userId,
      })
    }
  })

  saveQuestionnaire(params).then((res) => {
    if (res.retCode == 2000) {
      uni.showToast({
        title: '提交成功',
        icon: 'success',
        mask: true,
      })
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/home/index' })
      }, 400)
    }
  })
}

const questionList = ref([])
// 获取问卷内容
const getQuestionnaire = () => {
  reqQuestionnaire().then((res) => {
    if (res.retCode == 2000) {
      questionList.value = res.data.surveys.map((el) => {
        if (el.radio) {
          el['checkVal'] = ''
          el.topicContent += '(单选)'
        } else {
          el['checkVal'] = []
          el.topicContent += '(多选)'
        }

        return el
      })
    }
  })
}
onMounted(() => {
  getQuestionnaire()
})
</script>

<style lang="scss" scoped>
//

.advice {
  font-size: 30rpx;
  margin-bottom: 15rpx;
  color: #303133;
}

.bottom {
  width: 100%;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  position: fixed;
  bottom: 0;
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}
</style>
